import * as React from 'react';
import { Form, Input, Icon, message, Button, InputNumber } from 'antd';
import MForm, { createMForm, FormItemLayout } from '../../../component/form/MForm';
import PriceInput from '../../../component/common/PriceInput';


let uuid = 0;
class CustomerDetailStep1 extends MForm {

  constructor(props: any) {
    super(props);
    this.state = Object.assign({
      keys: [null]
    }, this.state);
  }


  handleSubmit = () => {
    this.props.onSubmit();
  }

  remove = (k) => {
    const {keys} = this.state;
    if (keys.length === 1) {
      message.warn('必须保留一个乘客');
      return;
    }
    this.setState({
      keys: keys.filter(key => key !== k),
    });
  }

  add = () => {
    uuid++;
    const {keys} = this.state;
    const nextKeys = keys.concat(uuid);
    this.setState({
      keys: nextKeys
    });
  }

  checkPrice = (rule, value, callback) => {
    if (value && value.currency) {
      callback();
      return;
    }
    callback('Price must greater than zero!');
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const style = {
      display: this.props.show === false ? 'none' : 'block'
    }
    return (
      <div style={style} className='view-form'>
        <Form inline ref='form' onSubmit={this.handleSubmit}>
          <section className='view-section'>
            <Form.Item
              {...FormItemLayout}
              label='Id'
              hasFeedback>{getFieldDecorator('id', {
                rules: [{
                  required: false, message: 'please input id',
                }],
              })(
                <Input readOnly={true} />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='NickName'
              hasFeedback>{getFieldDecorator('nickName', {
                rules: [{
                  required: true, message: 'The input is required!'
                }, {
                  min: 2, message: 'Please input more than 2 char!',
                }],
              })(
                <Input onKeyDown={this.handleKeyDown} />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='PriceInput'
              hasFeedback>{getFieldDecorator('PriceInput', {
                rules: [{
                  required: false, message: 'please input price as 0.1 ~ 9.9 ',
                }],
              })(
                <PriceInput digit={2} min={0.1} max={999.99} />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='InputNumber'
              hasFeedback>{getFieldDecorator('InputNumber', {
                rules: [{
                  required: false, message: 'please input price as 0.1 ~ 9.9 ',
                }],
              })(
                <InputNumber min={0} max={99.9} />
                )}
            </Form.Item>
            {
              this.renderDynamic()
            }
            <Form.Item
              {...FormItemLayout}
              className='ant-form-item-block ant-form-item-empty-label' >
              <Button type='dashed' onClick={this.add} style={{ width: '100%' }}>
                <Icon type='plus' /> Add field
              </Button>
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              className='ant-form-item-block ant-form-item-empty-label' >
              <Button type='primary' onClick={this.handleSubmit} style={{ width: '100%' }}>
                <Icon type='save' /> 保存
              </Button>
            </Form.Item>
          </section>
        </Form>
        this is some info
      </div>
    );
  }
  renderDynamic() {
    const { getFieldDecorator } = this.props.form;
    const {keys} = this.state;
    const formItems = keys.map((k, index) => {
      return (
        <Form.Item
          {...FormItemLayout}
          label={index === 0 ? 'Passengers' : ''}
          key={k}
          className={index === 0 ? 'ant-form-item-block' : 'ant-form-item-block ant-form-item-empty-label'}
          hasFeedback>{
            getFieldDecorator(`names${k}`, {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [{
                required: false,
                whitespace: true,
                message: 'Please input passenger\'s name or delete this field.',
              }],
            })(
              <Input placeholder='passenger name' />
              )
          }
          {index > 0 ?
            <div className='ant-icon-after-input'>
              <Icon type='minus-circle' onClick={() => this.remove(k)} />
            </div> : ''
          }
        </Form.Item>
      )
    });
    return formItems;
  }
}
export default createMForm(CustomerDetailStep1);


